<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  
</head>
<style>
  * {
    padding: 0;
    margin: 0;
  }
  main{
    width: 900px;
    height: 500px;
    border: 1px solid red;
    margin: 120px auto;
    overflow: auto;
    
  }
  div{
    height: 2000px;
    margin: 30px;
    border: 1px solid red;
    /* background-color: aqua; */
    background: url(404.png) no-repeat;
    background-size:20% 20%;
    background-position: 50% 0;
  }
</style>
<body>
    <img class="img1" src="404.png" alt="" style="width: 20%;height: 20%;">
    <p>加载中。。。</p>


    <img class="img2" src="http://" alt="" style="width: 20%;height: 20%;">
</body>
<script>
    const imgDom1=document.querySelector(".img1")
    const imgDom2=document.querySelector(".img2")
    const pDom=document.querySelector("p")
    imgDom1.onload=function(){
        pDom.innerHTML="加载完毕"
    }
    

    // 从服务端加载图片的最优解，加载失败重复3次
    let nub=3
    let src=imgDom2.src
    imgDom2.onerror=function(){
        console.log("重复次数")
        if(nub>0){
         nub--
         this.src=src
       }else{
        this.src='404.png'
       }
    }
    
</script>
</html>
